<script lang="ts" setup>
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 自定义类名
  customClass: {
    type: String,
    default: '',
  },
  // 垂直间距
  ver: {
    type: [Number, String],
    default: 10,
  },
  // 水平间距
  hor: {
    type: [Number, String],
    default: 15,
  },
  // 是否透明
  transparent: {
    type: Boolean,
    default: false,
  },
})

const style = computed(() => {
  return `margin: 0 ${props.hor}px;padding:${props.ver}px 0;`
})
</script>

<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <view class="demo-block" :class="[transparent ? '' : 'demo-block-bg', customClass]">
    <view class="demo-block-title">
      {{ title }}
    </view>
    <view :style="transparent ? '' : style">
      <slot />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.demo-block {
  margin-bottom: 0.75rem;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0.75rem;
  color: #6b7280;

  &:last-child {
    margin-bottom: 0;
  }

  .dark & {
    color: #d1d5db;
  }
}

.demo-block-bg {
  background-color: #ffffff;

  .dark & {
    background-color: var(--wot-dark-background2);
  }
}

.demo-block-title {
  padding: 0.75rem 1rem;
  font-size: 26rpx;
}
</style>
